<template>
    <a-input v-model:value="inputValue"></a-input>
    <br> <br>
    <!-- 事件传递直接简写  $emit -->
    <a-button type="primary" @click="$emit('SynchroData', inputValue)">$emit 简写</a-button>

    <br> <br>
    <!-- 事件传递校验 -->
    <a-button type="primary" @click="doEvent">在 setup 中调用</a-button>
    <br> <br>
</template>
<script setup>
import { ref } from 'vue';
const inputValue = ref();

// emit 传值校验
const emit = defineEmits({
    // 在这里需要声明一下事件名称，否则会报警告
    SynchroData: {},
    SynchroEvent: (value) => {
        // 这里的校验只会弹出一个警告，并不会阻止事件传递😓
        // 但是可以在这里加一层事件过程处理
        return ['success', 'warning', 'danger'].includes(value)
    }
})

// 在 setup 中进行 emit 事件传递
const doEvent = () => {
    emit('SynchroEvent', inputValue.value)
}

// emit 简写
// 正常不会对事件进行处理
// const emit = defineEmits(['SynchroData' , 'SynchroEvent'])

</script>
<style lang="less" scoped>
</style>